<template>
    <div ref="money"> 
        <div>
            <div v-if="bfUserInfo" class="tx-c user-bg tx-c-wh">
                <h1 class="m-h-text">存取款</h1>
                <div class="iconSize-4 icon-bor" :style="{backgroundImage: 'url(' + avatar + ')'}"></div>
                <div class="userID-mar">{{ bfUserInfo.username }}</div>
                <div class="tx-s-14">余额：{{ bfUserInfo.balance }}</div>
            </div>
            <div v-if="!bfUserInfo" class="m-header-r">
                <h1 class="m-h-text">存取款</h1>
            </div>
            <div class="padd-t tx-c-r" :class="{'scroll-box' : bfUserInfo}">
                <div class="btn tx-c" @click="opeMoneyDetails('/recharge')">充值</div>
                <div class="btn tx-c" @click="opeMoneyDetails('/withdrawal')">提现</div>
                <div class="btn tx-c" >额度转换</div>
                <div class="btn tx-c" @click="opeMoneyDetails('/tradingRecords')">交易记录</div>
                <div class="btn tx-c" >额度转换记录</div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6"> 
import 'common/css/user.css'
import { mapGetters } from 'vuex'
import { isDefine } from '../common/js/common'
export default {
    data() {
        return { 
            avatar : ''
        }
    },
    created() {
        this.avatar = this.bfUserInfo.avatar || require('../common/image/jzsb.png')
    },
    methods: {
        opeMoneyDetails (page) {
            if(!isDefine(this.bfUserInfo)){
                this.$router.push('/login')
            }else if(!this.$store.state.bindingName){
                this.$router.push('/bindingName')
            }else if(page == '/withdrawal' && !this.bfUserInfo.bankCardBinded){ 
                const _this = this // 需要注意 onCancel 和 onConfirm 的 this 指向
                this.$vux.confirm.show({
                    // 组件除show外的属性
                    content: '您还未绑定银行卡',
                    cancelText: '取消',
                    confirmText: '立即绑定',
                    hideOnBlur: true,
                    onCancel () {
                    },
                    onConfirm () {
                        _this.$router.push('/bindingCard')
                    }
                }) 
            }else{
                this.$router.push(page)
            }
        }
    },
    computed: {
        ...mapGetters([
            'bfUserInfo'
        ])
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus"> 
@import "~common/stylus/variable" 
    .scroll-box
        position: fixed
        width: 100%
        top : 11rem
        bottom : 3.25rem 
        overflow: auto
    .scroll-box::-webkit-scrollbar
        display: none
    .padd-t
        padding-top : 2rem
    .icon-bor
        border : 2px solid $color-t-w3
        border-radius : 100% 100%
    .userID-mar
        margin : .75rem 0 .5rem 0
    .btn
        width : 85%
        height : 2rem
        line-height : 2rem
        margin : 1rem auto
        border : 1px solid $color-r
</style>